import { _decorator, Component, EventTouch, Layout, Node, UITransform, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

import CardUI from './CardUI';

/**@ 滑动选择器
 * - 锚点(0.5,0.5)
 * 
 */
@ccclass('ScrollSelect')
export default class ScrollSelect extends Component {
    private _layout_o: Layout;
    private _start_pos_o: Vec3;
    private _select_start_n: number;
    private _select_end_n: number;

    start() {
        let children = this.node.children;//获取所有子节点
        console.log("children: ", children)
    }

    onLoad () {
        this._layout_o = this.node.getComponent(Layout);
        // console.log("_layout_o :", this._layout_o)
        this.node.on(Node.EventType.TOUCH_START, this._onTouchStart.bind(this));
        this.node.on(Node.EventType.TOUCH_MOVE, this._onTouchMove.bind(this));
        this.node.on(Node.EventType.TOUCH_END, this._onTouchEnd.bind(this));
        this.node.on(Node.EventType.TOUCH_CANCEL, this._onTouchCancel.bind(this));
    }

    private initTouchEvent() {
        this.node.on(Node.EventType.TOUCH_START, this._onTouchStart.bind(this))
        // this.node.on(Node.EventType.TOUCH_START, this.onTouchEvent.bind(this))
        // this.node.on(Node.EventType.TOUCH_START, this.onTouchEvent, this)
        // this.node.on(Node.EventType.MOUSE_DOWN, this.onTouchEvent, this)
    }

    private offTouchEvent() {
        this.node.off(Node.EventType.TOUCH_START)
        // this.node.off(Node.EventType.MOUSE_DOWN)
        // this.node.off(Node.EventType.TOUCH_START,this.onTouchEvent, this )
        // this.node.off(Node.EventType.MOUSE_DOWN, this.onTouchEvent, this)
    }

    /**检测点击节点 */
    private _checkTouchNode(pos_o_: Vec3): number {
        // console.log("_checkTouchNode.pos_o_ :", pos_o_)
        if (this._layout_o.horizontalDirection == Layout.HorizontalDirection.LEFT_TO_RIGHT) {
            let temp1_n = Math.abs(this._layout_o.spacingX);
            let temp2_n = this.node.children[0].getComponent(UITransform).width + this._layout_o.spacingX;
            let temp3_n = 0;
            for (let i = this.node.children.length - 1; i >= 0; --i) {
                temp1_n += temp2_n;
                // 判断是否在节点范围内
                if (pos_o_.x > (this.node.getComponent(UITransform).width * 0.5 - temp1_n) && pos_o_.x < (this.node.getComponent(UITransform).width * 0.5 - temp3_n)) {
                    // log("在 " + this.node.children[i].name + " 节点范围内");
                    return i;
                }
                temp3_n += temp3_n ? temp2_n : temp1_n;
            }
        }
    }
    /**清空选中节点 */
    private _clearSelected(): void {
        this.node.children.forEach(node_o=> {
            node_o.getComponent(CardUI).selected_b = false;
        });
    }
    /**更新牌状态 */
    private _updateCard(): void {
        let temp_o: CardUI;
        this.node.children.forEach(node_o=> {
            temp_o = node_o.getComponent(CardUI);
            if (temp_o.selected_b) {
                temp_o.rise_b = !temp_o.rise_b;
            }
        });
    }
    /* ***************事件回调*************** */
    /**触控开始 */
    private _onTouchStart(evt: EventTouch): void {
        const location = evt.getUILocation();
        // console.log("_onTouchStart.location :", location)
        
        this._start_pos_o = this.node.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(location.x, location.y, 0));
        // log("开始坐标: " ,this._start_pos_o);
        this._select_start_n = this._checkTouchNode(this._start_pos_o);
        // 选中首次点击牌
        for (let i = 0; i < this.node.children.length; ++i) {
            if (i == this._select_start_n) {
                this.node.children[i].getComponent(CardUI).selected_b = true;
                break;
            }
        }
    }
    /**触控移动 */
    private _onTouchMove(evt: EventTouch): void {
        const location = evt.getUILocation();
        // console.log("_onTouchMove.location :", location)
        let local_pos_o = this.node.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(location.x, location.y, 0));
        if (local_pos_o.x > -this.node.getComponent(UITransform).width * 0.5
            && local_pos_o.x < this.node.getComponent(UITransform).width * 0.5
            && local_pos_o.y > -this.node.getComponent(UITransform).height * 0.5
            && local_pos_o.y < this.node.getComponent(UITransform).height * 0.5)
        {
            this._select_end_n = this._checkTouchNode(local_pos_o);
            // 将 this._select_start_n - this._select_end_n 范围内节点设置为选中
            let mini_n: number;
            let max_n: number;
            if (this._select_start_n > this._select_end_n) {
                mini_n = this._select_end_n;
                max_n = this._select_start_n;
            } else {
                mini_n = this._select_start_n;
                max_n = this._select_end_n;
            }
            for (let i = 0; i < this.node.children.length; ++i) {
                this.node.children[i].getComponent(CardUI).selected_b = i >= mini_n && i <= max_n;
            }
        }
    }
    /**触控结束 */
    private _onTouchEnd(evt: EventTouch): void {
        // console.log("_onTouchEnd :", evt)
        this._updateCard();
        this._clearSelected();
    }
    /**触控返回 */
    private _onTouchCancel(evt: EventTouch): void {
        this._updateCard();
        this._clearSelected();
    }

}


